Files for my website
bwc9876.dev
1---
2import { getCollection } from "astro:content";
3import { Image } from "@astrojs/image/components";
4import Layout from "@layouts/Layout.astro";
5import IconLink from "@components/IconLink.astro";
6import getProjectImageSrc from "@images/utils";
7import { getImage } from "astro/dist/assets/internal";
8export async function getStaticPaths() {
9 const renameEntries = await getCollection("projects");
10 return renameEntries.map((entry) => ({
11 params: { slug: entry.slug },
12 props: { entry }
13 }));
14}
15const { entry } = Astro.props;
16const { Content } = await entry.render();
17
18const src = await getProjectImageSrc(
19 entry.data.links?.github ?? "Not Found",
20 entry.data.image?.src
21);
22
23const og = {
24 src,
25 alt: entry.data.name
26};
27---
28
29<Layout title={entry.data.name} description={entry.data.summary} keywords={entry.data.tags} og={og}>
30 <header>
31 <div class="img-container">
32 <Image
33 fit="inside"
34 position="center"
35 format="webp"
36 background="#18232C"
37 width={entry.data.image?.width ?? 474}
38 height={entry.data.image?.height ?? 474}
39 alt={entry.data.name}
40 src={src}
41 />
42 </div>
43 <hgroup>
44 <h1>{entry.data.name}</h1>
45 <h2>
46 {entry.data.timespan.from}{
47 entry.data.timespan.to && <> - {entry.data.timespan.to}</>
48 } •
49 {entry.data.tags.join(" • ")}
50 </h2>
51 </hgroup>
52 <div class="links">
53 {
54 entry.data.links?.github && (
55 <span>
56 <IconLink
57 icon="github"
58 size={25}
59 label="GitHub"
60 placement="bottom"
61 href={`https://github.com/${entry.data.links.github}`}
62 />
63 </span>
64 )
65 }
66 {
67 entry.data.links?.other &&
68 Object.keys(entry.data.links.other).map((k) => (
69 <span>
70 <IconLink
71 icon="link-45deg"
72 size={25}
73 href={entry.data.links.other[k]}
74 placement="bottom"
75 label={k}
76 />
77 </span>
78 ))
79 }
80 </div>
81 </header>
82 <Content />
83</Layout>
84
85<style>
86 header > hgroup {
87 margin-bottom: var(--spacing);
88 }
89
90 header > div.img-container {
91 width: 100%;
92 display: flex;
93 justify-content: center;
94 }
95
96 header {
97 background-color: var(--card-sectionning-background-color);
98 padding: var(--spacing);
99 border-radius: 5px;
100 margin-bottom: calc(var(--spacing) * 5) !important;
101 text-align: center;
102 }
103
104 .links {
105 display: flex;
106 align-content: center;
107 justify-content: center;
108 gap: var(--spacing);
109 }
110
111 .links > span {
112 display: flex;
113 align-items: center;
114 }
115</style>